<template>
  <page-view class="search-food-page">
    <page-header title="搜索" :show-back="true"></page-header>
    <div class="context-box">
      <div class="query-box">
        <input
          type="text"
          v-model="keyword"
          placeholder="请输入菜品名称"
          ref="inputEle"
          class="query-text"
        />
        <button @click="getFoodByName()" class="query-btn">搜索</button>
      </div>
      <!-- 查出来的菜品展示 -->
      <div class="search-result-box" v-if="foodList.length > 0">
        <list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          color="#0094ff"
        >
          <food-item
            v-for="(item, index) in foodList"
            :key="index"
            :f_item="item"
          ></food-item>
        </list>
      </div>
    </div>
  </page-view>
</template>

<script>
import PageView from "@/components/PageView.vue";
import PageHeader from "@/components/PageHeader.vue";
import { ref, toRefs, reactive } from "@vue/reactivity";
import FoodItem from "@/components/FoodItem.vue";
import { List } from "vant";
import Api from "../utils/api";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";

export default {
  components: { PageView, PageHeader, FoodItem, List },
  name: "SearchFood",
  setup() {
    const { proxy } = getCurrentInstance();
    let keyword = ref("");
    let inputEle = ref(null);

    //获取菜品列表
    // 是否显示加载状态
    const loading = ref(false);
    // 是否加载完成
    const finished = ref(false);

    // 食物数据
    const foodData = reactive({
      pageCount: 0,
      pageEnd: 0,
      pageIndex: 1,
      pageStart: 1,
      totalCount: 0,
      foodList: [],
    });
    //请求数据
    const getFoodByName = async (pageIndex = 1) => {
      if (keyword.value.trim() === "")
        return proxy.$toast.fail("请输入菜品名称");
      //   如果页码等于1, 清空食物数组;
      if (pageIndex === 1) {
        foodData.foodList.length = 0;
      }
      loading.value = true;

      //   if(food_name) sql+=food_name=?

      let results = await Api.foodInfo.getListBypage({
        pageIndex: pageIndex,
        food_name: keyword.value,
      });
      console.log(results);
      foodData.pageCount = results.pageCount;
      foodData.pageEnd = results.pageEnd;
      foodData.pageIndex = results.pageIndex;
      foodData.pageStart = results.pageStart;
      foodData.totalCount = results.totalCount;

      //处理图片的网络地址
      results.listData.map(
        (item) => (item.food_img = proxy.BaseURL + item.food_img)
      );
      foodData.foodList.push(...results.listData);
      //有请求就为false
      loading.value = false;
      //判断是否在最后一页
      finished.value = foodData.pageIndex >= foodData.pageCount;
    };

    // 丅滚懒加载菜单
    const onLoad = () => {
      if (foodData.pageIndex < foodData.pageCount) return;
      getFoodByName(foodData.pageIndex + 1);
    };
    onMounted(() => {
      keyword.value = "";
      //获取光标
      inputEle.value.focus();
    });

    return {
      ...toRefs(foodData),
      loading,
      finished,
      keyword,
      inputEle,
      onLoad,
      getFoodByName,
    };
  },
};
</script>

<style lang="scss" scoped>
.search-food-page {
  @include flexbox(column);
  .context-box {
    flex: 1;
    overflow: auto;
    // @include flexbox(row, center);
    .query-box {
      width: 80%;
      margin: 10px auto;
      display: flex;
      height: 30px;
      border-radius: 30px;
      overflow: hidden;
      //   border-bottom: 1px solid #ccc;
      box-shadow: 0px 5px 10px #ccc;
      .query-text {
        flex: 1;
        border: none;
        box-sizing: border-box;
        padding: 0 10px;
        outline: none;
        background-color: rgba($color: #c3b3b3, $alpha: 0.5);
        color: white;
      }
      .query-btn {
        width: 45px;
        font-size: 14px;
        border: none;
        outline: none;
        background-color: rgba($color: #c3b3b3, $alpha: 0.5);
        color: #fff;
      }
    }
  }
}
</style>
